<template>
  <div class="pageHeaderbox" :style="{ top: Fiexdtop + 'px' }">
    <!-- :style="{ 'z-index': z_index }" -->
    <div
      class="pageHeader min-width"
      :class="{
        'page-header-box-transparent': !hideHeaderBg,
        'page-header-fixed': headerFixed,
      }"
    >
      <div class="pageHeaders">
        <div class="f-a-c ispage f-j-sb-a-c">
          <div class="f-a-c">
            <div class="logo" @click="logoGo">
              <img :src="logoSrc" alt="" />
            </div>
            <div class="community-box f-a-c">
              <div
                class="f-j-a-c"
                v-for="(item, index) in communityList"
                :key="index"
                @click="communityClick(index, item)"
                v-track="{ name: item.title, position: 'header' }"
              >
                <span
                  :style="{ color: topcurrent == index ? '#44C6E5' : '' }"
                  >{{ item.title }}</span
                >
                <svg-icon
                  name="icon-hot"
                  class="hotsvg"
                  style="font-size: 23px"
                  v-if="index == 1"
                ></svg-icon>
                <div class="line" v-if="topcurrent == index"></div>
              </div>
            </div>
          </div>
          <div class="f-a-c">
            <div class="f-a-c">
              <div
                class="nologin click f-j-a-c"
                @click="gologin"
                v-if="!minToken"
              >
                <span>登录/注册</span>
              </div>
              <div class="user" v-else>
                <div class="userbox f-a-c" style="align-items: flex-end">
                  <userAvatar
                    :imgWidth="40"
                    :divWidth="46"
                    :userImgs="minUserInfo.user_avatar"
                    :showDv="minUserInfo ? minUserInfo.is_official == 1 : false"
                  ></userAvatar>
                </div>
                <div class="userbox_item f-j-a-c">
                  <div class="f-d-c userbox_itemSpan f-j-a-c">
                    <span>{{ minUserInfo.user_name }}</span>
                    <span class="ellipsis"
                      >{{ minUserInfo.user_introduce }}
                    </span>
                  </div>

                  <!-- 用户粉丝/关注/硬币/余额 -->
                  <div class="user-balance-box f-j-a-c">
                    <div class="f-d-c f-a-c">
                      <span>{{ userBalance ? userBalance.coins : 0 }}</span>
                      <span>{{ coinsConfig.name  }}</span>
                    </div>

                    <div class="f-d-c f-a-c">
                      <span>{{ userBalance ? userBalance.balance : 0 }}</span>
                      <span>余额</span>
                    </div>
                  </div>

                  <div class="userlist">
                    <div
                      class="listitem f-a-c f-j-sb-a-c"
                      v-for="(item, index) in userList"
                      :key="index"
                      @click="userListClick(item)"
                    >
                      <div class="f-a-c listitemsvg">
                        <svg-icon
                          :name="item.svg"
                          style="width: 20px; hight: 20px"
                        ></svg-icon>
                        <span>{{ item.text }}</span>
                      </div>
                      <div v-if="index != 5">
                        <svg-icon class="hei" name="icon-gd-hei"></svg-icon>
                        <svg-icon class="lan" name="icon-gd-lan"></svg-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rtiganniu f-a-c">
              <div class="gonggao f-j-a-c f-a-c" @click="xiaoxi">
                <!-- <svg-icon class="svggengong" name="icon-xiaoxi" v-if="unreadNum"></svg-icon> -->

                <div>
                  <el-badge
                    :value="unreadNum"
                    :max="99"
                    class="item"
                    :hidden="unreadNum > 0 ? false : true"
                  >
                    <svg-icon class="svggengong" name="icon-xiaoxi"></svg-icon>
                  </el-badge>
                </div>
              </div>
              <div class="gonggao f-j-a-c f-a-c" @click="sixing">
                <el-badge
                  :value="xiaoxiNum"
                  :max="99"
                  class="item"
                  :hidden="xiaoxiNum > 0 ? false : true"
                >
                  <svg-icon class="svggengong" name="icon-sx"></svg-icon>
                </el-badge>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <login
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      @close="close"
    ></login>

    <div
      v-if="uploadVisbile || wechaterweima"
      class="moban"
      @click="mobanClick"
    ></div>

    <!-- <div class="uploadimg f-a-c" v-if="uploadVisbile">
    <div
      class="uploaditem f-d-c f-j-a-c"
      v-for="(item, index) in uploadBox"
      @click="uploadBoxCLick(item.url)"
      :key="index"
    >
      <svg-icon :name="item.svg" style="width: 40px; height: 40px"></svg-icon>
      <span>{{ item.text }}</span>
    </div>
  </div> -->

    <!-- <div class="padd"></div> -->
    <notification
      :drawers="drawer"
      v-if="drawer && minToken"
      @closeinfo="closeinfo"
    ></notification>

    <!-- <div class="padd"></div> -->
    <!-- <bindcode
      v-if="bingcodeboxCheck"
      type="wechat"
      ref="bindcodebox"
    ></bindcode> -->
  </div>

  <PersonaLletter
    :drawerletter="drawerletter"
    v-if="drawerletter && minToken"
    @closeinfo="closeinfo"
  ></PersonaLletter>
</template>

<script>
import bindcode from "@/components/bindcode.vue";
import { putuserData } from "@/axios/api.js";
import WebSocketTool from "@/utils/websocket";

import {
  info,
  getUserChatList,
  list,
  Hotlist,
  myFinancial,
} from "@/axios/community.js";
import notification from "@/components/notification.vue";
import PersonaLletter from "@/components/PersonaLletter.vue";
import login from "@/views/home/components/login.vue";
import { ElMessage } from "element-plus";
import userAvatar from "@/components/userAvatar.vue";
import { useRouter } from "vue-router";
import ClickOutside from "element-plus/lib/directives/click-outside/index";
import { numToKW } from "@/utils/common.js";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
  ref,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {
    Fiexdtop: {
      type: [String, Number],
      default: "60",
    },
  },
  components: {
    login,
    userAvatar,
    notification,
    PersonaLletter,
    bindcode,
  },
  directives: { ClickOutside },

  setup() {
    const bindcodebox = ref(null);

    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let accessToken = computed(() => {
      return store.state.accessToken;
    });
    let minToken = computed(() => {
      return store.state.minToken;
    });
    // 头部背景色显示隐藏
    let hideHeaderBg = computed(() => {
      return store.state.hideHeaderBg;
    });
    let headindex = computed(() => {
      return store.state.headindex;
    });
    // 头部是否浮动
    let headerFixed = computed(() => {
      return store.state.headerFixed;
    });

    let unreadNum = computed(() => {
      return store.state.unreadNum || 0;
    });
    let xiaoxiNum = computed(() => {
      return store.state.xiaoxiNum || 0;
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let minUserInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let userData = computed(() => {
      return store.state.userData;
    });

    let coinsConfig = computed(() => {
      let setting = store.state.globalConfig;
      if(setting.app && setting.app.coins){
        return setting.app.coins;
      }
      return {};
    });

    let data = reactive({
      logoSrc: '',
      bingcodeboxCheck: false, //绑定微信
      wechaterweima: false,
      newHotList: [], // 热门搜索记录
      nomalheadCheck: false, // 判断普通头
      searchHistoryListcommint: [], // 社区搜素记录
      routerCheck: true, // 判断当前路由是否是社区
      drawerletter: false,
      drawer: false,
      imgtou: new URL("../assets/image/tx@2x.png", import.meta.url),

      userList: [
        // {
        //   text: "创作者空间",
        //   svg: "icon-kongjian",
        //   URL: "/gouserinfo",
        // },
        {
          text: "账号设置",
          svg: "icon-zhanghao",
          URL: "/accoutSetting",
        },
        {
          text: "我的社区",
          svg: "qz",
          URL: "/pages/user/user",
        },
        {
          text: "充值及余额",
          svg: "icon-chongzhi",
          URL: "/accoutSetting?TopUpNowType=true",
        },
        // {
        //   text: "购买记录",
        //   svg: "icon-goumai",
        // },
        {
          text: "退出登录",
          URL: "/oulogin",
          svg: "icon-tuichu",
        },
      ],
      search: "", //搜素
      dialogVisible: false,
      uploadVisbile: false,
      topcurrent: 0, // 顶部点击
      communityList: [],

      showHistory: false,
      numss: 0,
      z_index: 0,
    });
    // 热门记录
    let getHotlist = () => {
      Hotlist().then((res) => {
        data.newHotList = res.data.slice(0, 5);
      });
    };

    // 搜索历史
    let getlist = () => {
      list().then((res) => {
        data.searchHistoryListcommint = res.data.slice(0, 5);
      });
    };
    // 未读消息
    let getinfo = () => {
      info().then((res) => {
        data.numss =
          res.data.list[0].noticeSystemCount +
          res.data.list[1].noticeLikeCollectCount +
          res.data.list[2].noticeCommentCount;
        store.commit("setunreadNum", data.numss);
      });
    };
    // 搜索历史记录
    let searchHistoryList = computed(() => {
      return store.state.searchHistory ? store.state.searchHistory : [];
    });
    // 模型iD
    let moduleID = computed(() => {
      return store.state.moduleID;
    });

    // 顶部栏点击
    let communityClick = (index, item) => {
      if (index == 4) {
        return ElMessage.error("暂未开放");
      }
      if (index == 1) {
        data.uploadVisbile = true;
        data.topcurrent = index;

        return;
      }
      data.topcurrent = index;
      store.commit("setheadindex", index);
      if (!item.url) {
        return noopen();
      }
      if (!minToken._value) {
        return ElMessage.error("请先登录");
      }
      router.push(item.url);
    };

    watch(
      () => data.uploadVisbile,
      (newVal, oldVal) => {
        if (newVal == true) {
          data.z_index = 14;
        } else {
          data.z_index = 10;
        }
      }
    );
    let noopen = () => {
      return ElMessage.warning("暂未开放");
    };
    let gologin = () => {
      data.dialogVisible = true;
    };
    let close = () => {
      data.dialogVisible = false;
      // console.log(userInfo.value);
      // if (!userInfo.value.unionid && minToken.value) {
      // data.bingcodeboxCheck = true;
      // proxy.$nextTick(() => {
      //   bindcodebox.value.dialogClick();
      // });
      // }
    };
    // 上传
    let uploadnow = () => {
      console.log(moduleID.value);
      if (!minToken._value) {
        return ElMessage.error("请先登录");
      }
      data.uploadVisbile = true;
      // 获取当前滚动条的位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      // 使用 CSS 样式禁用滚动条
      document.body.style.overflow = "hidden";
      // 设置滚动条位置，防止页面跳动
      // document.body.style.position = "fixed";
      // document.body.style.top = -scrollTop + "px";
      // document.body.style.left = -scrollLeft + "px";
    };
    let mobanClick = () => {
      enableScroll();
      data.uploadVisbile = false;
      data.wechaterweima = false;
    };
    let uploadBoxCLick = (url) => {
      if (!minToken._value) {
        data.dialogVisible = true;
        return ElMessage.warning("请先进行登录");
      }
      data.uploadVisbile = false;
      enableScroll();
      router.push(url);
    };
    // 关闭消息弹窗
    let closeinfo = () => {
      enableScroll();

      data.drawer = false;
      data.drawerletter = false;
    };
    // 消息弹窗
    let xiaoxi = () => {
      // return;
      if (!minToken.value) {
        return ElMessage.warning("请先进行登录");
      }
      data.drawer = true;
    };
    let userListClick = (item) => {
      // console.log(item.URL);
      if (item.URL == "/gouserinfo") {
        router.push({
          path: item.URL,
          query: { id: 1 },
        });
        // return ElMessage.error("暂未开放");
      } else if (item.URL == "/oulogin") {
        store.commit("outLogin");
        router.push("/");
      } else if (item.text == "我的社区") {
        router.push({
          path: item.URL,
          query: {
            id: store.state.minUserInfo.id,
          },
        });
      } else {
        // return ElMessage.error("暂未开放");
        router.push(item.URL);
      }
    };
    let logoGo = () => {
      enableScroll();
      router.push("/");
    };
    // 监听回车
    let keyboard = () => {
      // if (data.routerCheck == true) {
      if (!minToken.value) {
        return ElMessage.warning("请先进行登录");
      }
      router.push({
        path: "/pages/common/search",
        query: { keyword: data.search },
      });
      // } else {
      //   // if (!data.search) return ElMessage.error("请输入搜索内容");
      //   // store.commit("setSearchHistory", data.search);
      //   // router.push({
      //   //   path: "/searchNew",
      //   //   query: { searchinput: data.search },
      //   // });
      // }
      let datas = {};
      datas.searchInput = data.search.search_content || data.search;
      datas.time = new Date().getSeconds();
      store.commit("saveUserDataInfo", {
        type: "history",
        data: datas,
      });
    };

    // 历史记录点击
    let entSearch = (item) => {
      data.search = item;
      keyboard();
    };

    // 删除历史记录
    let removeSearch = (index) => {
      store.commit("removeSearchHistory", index);
    };
    // 私信
    let sixing = () => {
      if (!minToken.value) {
        return ElMessage.warning("请先进行登录");
      }
      getUserChatLists();

      // return;
      // 获取当前滚动条的位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      // 使用 CSS 样式禁用滚动条
      document.body.style.overflow = "hidden";
      data.drawerletter = true;
    };
    let enableScroll = () => {
      // console.log("进入");
      // 恢复滚动条位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      // 移除 CSS 样式
      document.body.style.overflow = null;
      document.body.style.position = null;
      document.body.style.top = null;
      document.body.style.left = null;
      // 恢复滚动条位置
      window.scrollTo(scrollLeft, scrollTop);
    };
    // 消息列表
    let getUserChatLists = () => {
      getUserChatList().then((res) => {
        let xiaoxiNum = 0;
        res.data.forEach((item, index) => {
          xiaoxiNum += Number(item.read_count);
        });
        // console.log(xiaoxiNum);
        store.commit("setxiaoxiNum", xiaoxiNum);
        store.commit("setPersonlist", res.data);
      });
    };
    // 链接websocket
    let getconnectWebSocket = () => {
      // const socket = new WebSocketTool("wss://sns.desai.art/wss");
      // console.log(store.state.Socket);
    };
    // 发送信息
    let gosendMessage = () => {
      let datas = {};
      datas.device = "mp";
      datas.mode = "bind";
      datas.played = "";
      datas.token = minToken.value;
      sendMessage(JSON.stringify(datas));
    };
    // 链接失败
    let errorMessage = (message) => {
      getconnectWebSocket();
    };
    // 成功接受
    let handleReceivedMessage = (message) => {
      let mssage = JSON.parse(message);
      if (mssage.mode == 2) {
        gosendMessage();

        setInterval(() => {
          gosendMessage();
        }, 60000);
      } else if (mssage.mode == 5) {
        store.commit("setwebsoketnums", 1);
        getUserChatLists();
      }
    };
    // aigc在线工具
    let AIGConlineListClick = (item, index) => {
      // console.log(item)
      // if (index == 1) {
      //   window.open(item.url, "_blank");
      //   return;
      // }
      if (!minToken._value) {
        return ElMessage.error("请先登录");
      }
      router.push(item.url);
    };
    // 上传用户数据
    let getputuserData = () => {
      let userDatalist = userData.value;
      putuserData(userDatalist).then((res) => {
        window.localStorage.removeItem("userData");
      });
    };

    // 用户余额
    let userBalance = computed(() => {
      if (store.state.minUserBalance) {
        return {
          coins: numToKW(store.state.minUserBalance.coins),
          balance: numToKW(store.state.minUserBalance.balance),
        };
      } else {
        return {
          coins: 0,
          balance: 0,
        };
      }
    });
    // let getMyFinancial = ()=>{
    //   let id = "?setUserid=0";
    //   myFinancial({id}).then(res=>{
    //     let resultData = res.data;
    //     let obj = {
    //       coins:numToKW(resultData.coins.total),
    //       balance:numToKW(resultData.financial.balance)
    //     };
    //     data.userBalance = obj
    //   })
    // };

    watch(
      () => router.currentRoute.value.path,
      (newVal, oldVal) => {
        // if (newVal == "/") {
        data.routerCheck = true;
        data.nomalheadCheck = true;
        // } else {
        //   data.routerCheck = false;
        //   data.nomalheadCheck = false;
        // }
      }
    );

    onMounted(() => {
      data.logoSrc = logoSrc_;
      // getUserChatLists();
      enableScroll();
      setTimeout(() => {
        if (minToken.value) {
        getlist();

        getHotlist();
        getconnectWebSocket();
        // if (userData.value) {
        //   getputuserData();
        // }
        }
        if (minToken.value) {
          getinfo();
          store.dispatch("updataMinUserBalance");
        }
      }, 1200);
      data.topcurrent = headindex.value;
    });
    onUnmounted(() => {});
    return {
      minUserInfo,
      headindex,
      userBalance,
      userData,
      coinsConfig,
      getputuserData,
      minToken,
      bindcodebox,
      headerFixed,
      hideHeaderBg,
      AIGConlineListClick,
      xiaoxiNum,
      errorMessage,
      handleReceivedMessage,
      gosendMessage,
      getconnectWebSocket,
      sixing,
      unreadNum,
      closeinfo,
      xiaoxi,
      moduleID,
      removeSearch,
      entSearch,
      searchHistoryList,
      communityClick,
      noopen,
      keyboard,
      userInfo,
      logoGo,
      accessToken,
      userListClick,
      uploadBoxCLick,
      mobanClick,
      uploadnow,
      close,
      gologin,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.yaoqingboax {
  position: relative;
}
.yaoqingpop {
  z-index: 10;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 132px;
  height: 146px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 16px 14px;
  > span {
    font-size: 10px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  > img {
    margin-top: 10px;
    width: 70px;
    height: 70px;
  }
  .smspan {
    margin-top: 10px;
    font-size: 4px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #41bddb;
  }
}
// 透明底
.page-header-box-transparent {
  transition: 0.4s;
  // color: $color-white;
  background-color: transparent !important;
  border: none !important;
}

// 固定定位
.page-header-fixed {
  position: fixed;
  top: 0;
  z-index: 2;
}

.buttonSearch {
  opacity: 0;
  position: absolute;
  right: 5px;
  width: 46px;
  height: 30px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 22px 22px 22px 22px;
  > span {
    margin-left: 10px;
    font-size: 16px;
    font-family: Arial-Regular, Arial;
    font-weight: 400;
    color: #ffffff;
  }
}
.redpop {
  position: absolute;
  top: -9px;
  right: -6px;
  width: 17px;
  height: 18px;
  background: #ff1111;
  font-size: 6px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border-radius: 50%;
}
.uploadimg {
  z-index: 12;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  .uploaditem {
    cursor: pointer;
    margin-left: 18px;
    width: 300px;
    height: 380px;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;

    &:first-child {
      margin-left: 0;
      background-image: url("../assets/image/icon-zuo-bj@2x.png");
      background-size: 100% 100%;
      > span {
        margin-top: 20px;
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #64c8dc;
      }
    }
    &:last-child {
      background-image: url("../assets/image/icon-you-bj@2x.png");
      background-size: 100% 100%;
      > span {
        margin-top: 20px;
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #92dcb3;
      }
    }
  }
}

.moban {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  // background-color: rgba(0, 0, 0, 0.7);
}
.nologin {
  width: 90px;
  height: 38px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-right: 10px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.pageHeaders {
  // justify-content: center;
  // z-index: 11;
  width: 100%;
  height: 56px;
}
.padd {
  position: relative;
  z-index: 1;
  width: 100%;
  // background-color: #fff;
  // height: 120px;
  height: 254px;
}
.ispage {
  // justify-content: center;
  // min-width: 1240px;
  width: 100%;
  // background-color: #64c8dc;

  height: 100%;
  margin: 0 auto;
  // background-color: red;
}
.svggengong {
  font-size: 34px;
}
.pageHeaderbox {
  // position: fixed;
  // top: 60px;
  z-index: 10;
  width: 100%;
}
.pageHeader {
  // position: relative;
  // z-index: 50;
  border-bottom: 1px solid #ececec;
  background-color: #fff;
  .logo {
    cursor: pointer;
    > img {
      width: 102px;
    }
  }
  @keyframes myexample {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .xialauplod {
    position: relative;
    margin-left: 20px;
    &:hover {
      .uploaddownload {
        display: block;
      }
    }
  }
  .uploaddownload {
    display: none;
    position: absolute;
    top: 35px;
    width: 94px;
    // height: 85px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 10px 10px;
    .uploaditem {
      padding: 10px 0;
      > span {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
        margin-left: 6px;
      }
      .svgup {
        display: none;
      }
      &:hover {
        background-color: rgba(65, 189, 219, 0.12);
        &:nth-child(1) {
          border-radius: 10px 10px 0 0;
        }
        &:last-child {
          border-radius: 0 0 10px 10px;
        }
        .svgup {
          display: block;
        }
        .svgup1 {
          display: none;
        }
        > span {
          color: #41bddb;
        }
      }
    }
  }
  .upload {
    width: 80px;
    height: 36px;
    background-color: rgba(65, 189, 219, 0.12);
    // background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 90px 90px 90px 90px;

    // width: 68px;
    // height: 28px;
    // background-color: rgba(241, 250, 250);
    // background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    opacity: 1;

    cursor: pointer;
    > img {
      width: 20px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #41bddb;
    }
    .uploadSVG {
      margin-right: 4px;
    }
    &:hover {
      // opacity: 0.7;
      // .uploaddownload {
      //   opacity: 1;
      // }
      .uploadSVG {
        transition: 0.5s;
        transform: rotate(360deg);
        // animation: myexample 0.2s infinite linear;
      }
    }
  }
  .line {
    position: absolute;
    bottom: -19px;
    width: 28px;
    height: 3px;
    background: #44c6e5;
    border-radius: 34px 34px 34px 34px;
    opacity: 1;
  }
  .community-box {
    position: relative;
    z-index: 30;
    > div {
      margin-left: 30px;
      cursor: pointer;
      position: relative;
      z-index: 30;
      @keyframes donw {
        0% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(0) rotate(-30deg);
        }
        100% {
          transform: translateY(0) rotate(0deg);
        }
      }
      .hotsvg {
        position: absolute;
        top: -12px;
        right: -22px;
        transform-origin: left bottom;
        animation: donw 0.4s ease-in-out 3;
      }
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }

      &:hover {
      }
    }
    .AIGCOnlinetool {
      padding: 20px;
      position: absolute;
      top: 38px;
      left: 0;
      // width: 268px;
      height: 148px;
      z-index: 999;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px 10px 10px 10px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .toolbox {
        margin-top: 20px;
      }
      .toolitem {
        margin-left: 40px;
        width: 25%;
        // width: 172px;
        // height: 70px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        cursor: pointer;
        .tootsvg {
          width: 36px;
          height: 36px;
          // font-size: 36px;
        }
        .toolspan {
          // margin-left: 10px;
          > span {
            margin-top: 4px;
            white-space: nowrap;
            &:first-child {
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #000000;
            }
            // &:last-child {
            //   font-size: 10px;
            //   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            //   font-weight: 400;
            //   color: #656f79;
            // }
          }
        }
        &:hover {
          transition: 0.2s;
          transform: scale(1.05);
        }
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  .input {
    margin: 0 20px 0 30px;
    // min-width: 1376px;
    // max-width: 1920px;
    // width: 100%;
    min-width: 290px;
    flex: 1;
    max-width: 450px;
    // width: 450px;
    height: 36px;
    background: #f3f4f5;
    border-radius: 107px;
    // opacity: 0.8;
    position: relative;
    > img {
      margin-left: 20px;
      width: 20px;
    }
    > input {
      padding: 0 20px 0 10px;
      width: 100%;
      height: 100%;
      border: none;
      background: #f3f4f5;
      border-radius: 107px;
      font-size: 14px;
      font-family: Arial-Regular, Arial;
      font-weight: 400;
      color: #656f79;
    }

    .search-history {
      width: 100%;
      // height: 80px;
      background: #ffffff;
      position: absolute;
      top: 50px;
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      padding: 0 20px;

      .history-item {
        padding: 20px 0 10px;
        .history-item-title {
          font-size: 14px;
          padding-bottom: 12px;
        }
        .history-list {
          flex-wrap: wrap;
          > div.history-tag {
            background: #f3f4f5;
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 14px;
            color: #656f79;
            margin-bottom: 10px;
            margin-right: 10px;
            cursor: pointer;
            .close-icon {
              margin-left: 10px;
              &:hover {
                transform: scale(1.2);
              }
              &:active {
                transform: scale(1);
                opacity: 0.8;
              }
            }
          }
        }
        .history-noData {
          font-size: 14px;
          color: #666;
          padding-bottom: 10px;
        }
      }
    }
    &:hover {
      .buttonSearch {
        opacity: 1;
      }
    }
  }
  .rtiganniu {
    padding: 0 10px;
    width: 150px;
    height: 40px;
  }
  .gonggao {
    position: relative;
    // margin-right: 20px;
    // margin-left: 10px;

    cursor: pointer;

    &:hover {
      width: 34px;
      height: 34px;
      background: #f4f6f7;
      border-radius: 50%;
    }
  }
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-3px) rotate(-20deg);
    }
    75% {
      transform: translateX(3px) rotate(20deg);
    }
    100% {
      transform: translateX(0);
    }
  }
  .yaodong {
    // animation: shake 0.5s ease-in-out infinite;
    animation: shake 0.4s ease-in-out 3;
  }
  .user {
    margin-right: 10px;
    cursor: pointer;
    position: relative;

    .userbox {
      z-index: 10;
      position: relative;
      transition: all 0.3s;
      > img {
        height: 46px;
        border-radius: 50%;
        width: 46px;
      }
    }
    .userbox_item {
      position: absolute;
      top: 65px;
      right: -95px;
      width: 240px;
      // height: 352px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px 10px 10px 10px;
      display: none;
    }
    &:hover {
      .userbox {
        transform: scale(1.5) translateY(50%);
      }
      .userbox_item {
        padding-top: 44px;
        display: block;
        .userbox_itemSpan {
          margin-top: 10px;
          > span {
            font-size: 1px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: 700;
            color: #000000;
            &:last-child {
              display: block;
              width: 200px;
              text-align: center;
              margin-top: 10px;
              font-size: 1px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
            }
          }
        }

        .user-balance-box {
          padding-top: 20px;
          justify-content: space-around;
          > div {
            > span:first-child {
              font-size: 18px;
              font-weight: bold;
            }
            > span:last-child {
              font-size: 12px;
              color: #656f79;
              line-height: 20px;
            }
          }
        }

        .userlist {
          margin-top: 10px;
          .listitem {
            padding: 0 20px;
            width: 100%;
            height: 46px;
            .listitemsvg {
              > span {
                margin-left: 16px;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #000;
              }
            }
            .lan {
              display: none;
            }
            .line {
              width: 210px;
              height: 1px;
              opacity: 1;
              border: 1px solid #ececec;
            }
            &:hover {
              .listitemsvg {
                > span {
                  color: #64c8dc;
                }
              }
              background: rgba(100, 200, 220, 0.12);
              .hei {
                display: none;
              }
              .lan {
                display: block;
              }
            }
            &:last-child {
              border-bottom: 1px solid #ececec;
            }
          }
        }
      }
    }
  }
  .down {
    cursor: pointer;
    > img {
      width: 20px;
    }
  }
}
</style>
